<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>"/> <!-- 设置页面的基础路径，页面所有资源引入和页面跳转都基于bathPath -->

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,job-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />
</head>
<body>
<article class="page-container">
    <!-- form的action中根据判断共享对象job是否为空，来指定表单提交的url -->
    <form class="form form-horizontal" action="${empty job ? 'job/insert.do' : 'job/update.do'}" method="post" id="jobForm">
        <!-- 在更新职务信息的环境下把jobId隐藏提交给后台 -->
        <input type="hidden" value="${job.jobId }" name="jobId" />
        <%--将permissionIds通过隐藏的方式提交给后台--%>
        <input type="hidden" value="${job.jobPermissions}" name="jobPermissions" id="jobPermissions"/>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>职务名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <!-- 在更新职务信息的环境下锁定职务名称信息，不能更改 -->
                <input type="text" class="input-text" ${job != null ? 'disabled' : '' } value="${job.jobName }"
                       placeholder="请输入职务名称" id="jobName" name="jobName">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">职务描述：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="${job.jobDesc }"
                       placeholder="请输入职务描述" id="jobDesc" name="jobDesc">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">职务权限：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <ul id="permissionTree" class="ztree"></ul>
            </div>
        </div>

        <div class="row cl">
            <div class="col-sm-1 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
            <div class="col-sm-1 col-sm-offset-1">
                <input class="btn btn-warning radius" type="reset" value="&nbsp;&nbsp;重置&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    /* 使用jquery-validation技术进行表单提交前的校验 */
    $().ready(function(){
        /* 在键盘按下并释放及表单提交时验证 */
        $("#jobForm").validate({
            // 校验规则
            rules:{
                jobName:{
                    required:true,
                    remote:{  // 通过异步验证来判断职务名是否重复，返回ture或false。达到局部刷新的效果
                        url:"job/checkJobName.do",
                        type:"post",
                        dataType:"json",
                        data:{
                            jobName:function(){
                                return $("#jobName").val();
                            }
                        }
                    }
                },
                jobDesc:{
                    required:true
                },
                jobPermissions:{
                    required:true
                }
            },

            //错误提示
            messages:{
                jobName:{
                    required:"职务名称不能为空",
                    remote:"该职务名称已经被使用"
                },
                jobDesc:{
                    required:"请选择职务类型"
                },
                jobPermissions:{
                    required:"职务表达式不能为空"
                }
            },

            /* 校验成功后的处理：
             *		1. 函数中的form就是上面表单的原始DOM对象
             * 		2. 原生对象-->Jquery对象：$(原生DOM对象)
             * 		3. Jquery对象-->原生对象: Jquery对象[0]
             *
             */
            submitHandler:function(form){
                //1.获取zTree中选中的权限数据，将
                //1.1 获取zTree对象
                var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
                //1.2 获取当前treeObj中选中的节点
                var selectedNodes = treeObj.getCheckedNodes(true);
                //1.3 如果选择的节点数量为0，则给出提示信息，并终止函数
                if(selectedNodes.length == 0){
                    layer.msg("最少需要分配一个权限",{icon:2});
                    return false;
                }
                //1.4 循环所有选中的节点，将permissionId放在新建的数组中
                var permissionIdsArr = new Array();
                for(var i = 0; i < selectedNodes.length; i++){
                    permissionIdsArr.push(selectedNodes[i].permissionId);
                }
                //1.5 将得到的permissionIdsArr转成字符串后赋值给jobPermissions这个隐藏id
                $("#jobPermissions").val(permissionIdsArr.toString());
                //2.提交表单
                $(form).ajaxSubmit(function(respData){
                    console.log(respData);
                    // 添加完毕后的提示
                    layer.msg(respData.msg,{icon:respData.code,time:2000},function(){
                        // 添加成功后
                        if(respData.code == 1){
                            // 刷新父页面表格
                            parent.refreshTable();
                            // 通过父页面关闭模态窗口
                            parent.layer.closeAll();
                        }
                    });
                });
            }
        });
    });
</script>

<%--异步加载permissionTree的数据--%>
<script type="text/javascript">
    /*zTree对象的设置*/
    var setting = {
        data:{
            /*设置支持简单的json格式数据*/
            simpleData:{
                enable:true,
                idKey:"permissionId",
                pIdKey:"parentId"
            },
            key: {
                name: "permissionName" /*每个节点的名称，要和后台查出来的数据对应。默认是"name"*/
            }
        },
        /*设置支持复选框*/
        check:{
            enable:true
        },
        /*设置异步加载数据*/
        async:{
            enable:true,
            url:"permission/getAllPermissions.do",
            dataFilter:ajaxDataFilter /*预处理zTree数据的函数*/
        },
        /*异步加载数据后回调的函数*/
        callback:{
            /*回显当前job的权限数据*/
            onAsyncSuccess:zTreeOnSyncSuccess
        }
    }

    /*预处理zTree数据的函数*/
    function ajaxDataFilter(treeId, parentNode, responseData){
        /*responseData是异步加载获取的数据对象*/
        if (responseData){
            for(var i = 0; i < responseData.length; i++){
                responseData[i].open = true;  //将每一个对象节点的open属性设置为true,这样前端页面就会默认展开
                responseData[i].url = "";  //将每一个对象节点的url属性设置为空，防止误点
            }
            console.log(responseData);  //打印调试
        }
        return responseData;  //数据处理完毕后返回
    }

    /*回显当前job的权限数据*/
    function zTreeOnSyncSuccess(){
        //1.获取到zTree对象
        var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
        //2.获取到职务的所有权限id组成的字符串, 然后将字符串转成数组
        var permissionIds = "${job.jobPermissions}";
        var permissionIdsArr = permissionIds.split(",");
        //3.遍历权限id数组，获取每一个permissionId, 再通过permissionId获取到每一个节点对象
        for(var i = 0; i < permissionIdsArr.length; i++){
            //4.通过"permissionId"属性值去匹配数组中每一个permissionIdsArr[i]，得到node对象；如果没有匹配到就返回null
            var node = treeObj.getNodeByParam("permissionId",permissionIdsArr[i],null);
            //5.如果node不为空，就让其选中: 第一个boolean代表是否让其选择，第二个boolean代表是否让其父节点选中
            if (node != null){
                treeObj.checkNode(node,true,false);
            }
        }
    }

    /*初始化zTree*/
    $(function(){
        $.fn.zTree.init($("#permissionTree"),setting);
    });

</script>


<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>